<!--
 * 布局-行
 * @作者: 陈老师儿~
 * @手机: 18560000860
 -->
<template>
    <view class="pure-row" :class="classes" :style="styles">
        <view class="pure-row-content" :id="id">
            <slot></slot>
        </view>
    </view>
</template>

<script>
    import props from "./props.js";
    export default {
        options: {
            // 将自定义节点设置成虚拟的
            // 头条、飞书：因为合并后丢失事件和 'provide/inject'
            // 京东：因为合并后不能合并外层 'class'
            // 百度：因为合并后会在控制台疯狂报警告
            // #ifndef MP-TOUTIAO || MP-LARK || MP-JD || MP-BAIDU
            virtualHost: true,
            // #endif

            // 组件样式隔离
            styleIsolation: "apply-shared",

            // 允许使用多个插槽
            multipleSlots: true,
        },
        props: props,
        data() {
            return {
                id: "",
                width: 0,
            };
        },
        computed: {
            // classes
            classes() {
                const classes = [];
                return classes;
            },

            // styles
            styles() {
                const styles = [];

                // 间隔
                if (this.gap) styles.push(`--pure-row-gap: ${this.gap}`);

                // 对齐方式
                if (this.justify) styles.push(`--pure-row-justify: ${this.justify}`);

                // 宽度
                if (this.width) styles.push(`--pure-row-width: ${this.width}px`);

                return styles;
            },
        },
        async mounted() {
            this.initIds();
            await this.$nextTick();
            await this.sleep();
            this.getRect();

            uni?.onWindowResize?.(async () => {
                await this.$nextTick();
                await this.sleep();
                this.getRect();
            });
        },
        methods: {
            // 初始化ids
            initIds() {
                this.id = `PureRow_${Date.now()}_${this.randomString()}`;
            },

            // 获取节点信息
            getRect() {
                return new Promise(async (resolve) => {
                    uni.createSelectorQuery()
                        .in(this)
                        .select(`#${this.id}`)
                        .boundingClientRect((rect) => {
                            resolve(rect);
                            this.width = rect?.width || 0;
                        })
                        .exec();
                });
            },

            // 生成一个36位的随机字符串
            randomString() {
                return Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
            },

            // Sleep
            sleep(time = 50) {
                return new Promise((resolve) => {
                    let timer = setTimeout(() => {
                        clearTimeout(timer);
                        resolve();
                    }, time);
                });
            },
        },
    };
</script>

<style scoped>
    @import "./style.css";
</style>
